<script setup>
 
import { onMounted, ref ,defineProps } from "vue";

const props = defineProps({
    isCollect: {
        type: Boolean,
        default: false
    }
 
  
})

 import collecedSvg from "@/assets/colleced.svg"
 import unCollecedSvg from "@/assets/unCollect.svg"
</script>

<template>
    <div class="collection"> <img :src=" props.isCollect  ? collecedSvg : unCollecedSvg"  >
        {{title }}
        </div>

</template>

  
<style lang="scss" scoped>
.collection{
    width: 100px;
    height: 40px;
    margin-left: 75%;
    background-color: rgba(191,156,198);
    border-radius: 10px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    color: wheat;

    img{
        margin: 0px;
        display: inline-block;
       width: 30px;
        height: 30px;
        
    }
  
}
  
</style>
   